<template>

	<view class="overlay">
		<view class="item" v-for="(item,index) in 4" @click="activeIndex=index">
			<view class="left">
				<image src="../../../static/image/dog.png" mode=""></image>
				<text>Milo</text>
			</view>
			<image src="/static/icon/true.png" mode="" class="select" v-if="index===activeIndex"></image>
		</view>
	</view>


</template>

<script setup>
	import {
		ref
	} from 'vue';
	const activeIndex = ref(0)
</script>

<style lang="scss" scoped>
	.overlay {
		border-radius: 8rpx;
		width: 120px;
		// height: 50px;
		padding: 20rpx;
		// border: 1px solid red;
		padding-bottom: 0;
		position: absolute;
		// top:60px;
		right: 10rpx;
		background-color: rgba(0, 0, 0, .4);
		transition: all .5s;
		// opacity: 0;
		z-index:0;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.left {
				display: flex;
				align-items: center;
				color: #fff;
				font-size: 28rpx;

				image {
					width: 70rpx;
					height: 70rpx;
					margin-right: 20rpx;
				}
			}

			.select {
				width: 35rpx;
				height: 35rpx;
			}

		}
	}
</style>